<template>
  <div class="page">
    <div class="header"></div>
    <div class="main-wrap">
      <div class="group_1">
        <template v-if="userInfo && userInfo.userId">
          <div class="group_3 flex-row">
            <img class="head-img" :src="userInfo && userInfo.avatar || '../assets/images/common/default_head.png'"
              mode="aspectFill" />
            <div class="text-group_12 flex-col">
              <span class="text_2">HI、{{ (userInfo && userInfo.memberTruename) || "" }} {{ userInfo.phone }}</span>
              <span class="text_3">让好药无障碍，让用药更安心</span>
            </div>
          </div>
           <div class="group_4">
          <div class="img-text_19 ">
            <img class="icon_1" referrerpolicy="no-referrer" src="../assets/images/mine/lj.png" />
            <div>
              <p class="text-group_2">券在手,</p>
              <p class="text-group_2">省钱走！</p>
            </div>
          </div>
          <div class="button_1 flex-col" @click="openWebView('/user/coupon/couponList', 'h5')">
            <span class="text_4">去领劵</span>
          </div>
        </div>
        </template>

        <template v-else>
          <div class="user-info plr12 df-c pt12 df1" @click="goLoginAction">
            <img class="head-img" src="../assets/images/common/default_head.png">
            <div class="df1">
              <view class="fs18 c666">未登录</view>
            </div>
            <div class="right-arrow mr5"></div>
          </div>
        </template>
       
      </div>
      <div class="group_5 ">
        <div class="group_12 flex-row" @click="openWebView('/user/order/list?status=0', 'h5')">
          <span class="text_5">我的订单</span>
          <span class="text_6">全部订单</span>
          <img class="icon_2" src="../assets/images/mine/icon_more.png" />
        </div>
        <div class="group_13 flex-row">
          <div class="list_3 flex-row" @click="openWebView('/user/order/list?status=1', 'h5')">
            <div class="img-text_20 flex-col">
              <div class="icon_3">
                <img class="img" src="../assets/images/mine/dfk.png" />
                <span class="badge" v-show="numberInfo.unPaidOrderCount">{{ numberInfo.unPaidOrderCount }}</span>
              </div>
              <span class="text-group_3">待付款</span>
            </div>
          </div>
          <div class="list_3 flex-row" @click="openWebView('/user/order/list?status=2', 'h5')">
            <div class="img-text_20 flex-col">
              <div class="icon_3">
                <img class="img" src="../assets/images/mine/dfh.png" referrerpolicy="no-referrer" />
                <span class="badge" v-show="numberInfo.unDeliveryOrderCount">{{ numberInfo.unDeliveryOrderCount
                }}</span>

              </div>
              <span class="text-group_3">待发货</span>
            </div>
          </div>
          <div class="list_3 flex-row" @click="openWebView('/user/order/list?status=3', 'h5')">
            <div class="img-text_20 flex-col">
              <div class="icon_3">
                <img class="img" src="../assets/images/mine/dsh.png" referrerpolicy="no-referrer" />
                <span class="badge" v-show="numberInfo.unRecOrderCount">{{ numberInfo.unRecOrderCount }}</span>
              </div>
              <span class="text-group_3">待收货</span>
            </div>
          </div>
          <div class="list_3 flex-row" @click="openWebView('/user/order/list?status=5', 'h5')">
            <div class="img-text_20 flex-col">
              <div class="icon_3">
                <img class="img" src="../assets/images/mine/ttsh.png" />
                <span class="badge" v-show="numberInfo.refundOrderCount">{{ numberInfo.refundOrderCount }}</span>
              </div>
              <span class="text-group_3">退款/售后</span>
            </div>
          </div>
        </div>
      </div>
      <div class="group_6 flex-col">
        <span class="text_7">基础服务</span>
        <div class="box_1 flex-col" @click="openWebView('/user/collect/Product', 'h5')">
          <div class="img-text_21 flex-row justify-between">
            <img class="icon_4" referrerpolicy="no-referrer" src="../assets/images/mine/wdsc.png" />
            <span class="text-group_4">我的收藏</span>
          </div>
          <div class="group_7 flex-col"></div>
        </div>
        <div class="box_2 flex-col" @click="openWebView('/user/address/list', 'h5')">
          <div class="img-text_22 flex-row justify-between">
            <img class="icon_5" referrerpolicy="no-referrer" src="../assets/images/mine/shdz.png" />
            <span class="text-group_5">收货地址</span>
          </div>
          <div class="section_3 flex-col"></div>
        </div>
        <div class="box_3 flex-col" @click="openWebView('/user/prescription/demandList', 'h5')">
          <div class="img-text_23 flex-row justify-between">
            <img class="icon_6" referrerpolicy="no-referrer" src="../assets/images/mine/wdcf.png" />
            <span class="text-group_6">我的处方</span>
          </div>
          <div class="group_8 flex-col"></div>
        </div>
        <div class="box_3 flex-col" @click="openWebView('user/groupBuyOrder/list', 'h5')">
          <div class="img-text_23 flex-row justify-between">
            <img class="icon_6" referrerpolicy="no-referrer" src="../assets/images/mine/wdpt.png" />
            <span class="text-group_6">我的拼团</span>
          </div>
          <div class="group_8 flex-col"></div>
        </div>
        <div class="box_4 flex-col">
          <div class="img-text_24 flex-row justify-between">
            <img class="icon_7" referrerpolicy="no-referrer" src="../assets/images/mine/bzkf.png" />
            <span class="text-group_7">帮助与客服</span>
          </div>
          <div class="group_9 flex-col"></div>
        </div>
        <div class="box_5 flex-col" @click="openWebView('/appointment/patientList', 'h5')">
          <div class="img-text_25 flex-row justify-between">
            <img class="icon_8" referrerpolicy="no-referrer" src="../assets/images/mine/yyrgl.png" />
            <span class="text-group_8">用药人管理</span>
          </div>
          <div class="group_10 flex-col"></div>
        </div>
        <div class="box_6 flex-row">
          <div class="img-text_26 flex-row justify-between">
            <img class="icon_9" referrerpolicy="no-referrer" src="../assets/images/mine/gywm.png" />
            <span class="text-group_9">关于我们</span>
          </div>
        </div>
        <div class="box_7 flex-col"></div>
        <div class="box_8 flex-col" @click="openWebView('/user/info/preview', 'h5')">
          <div class="img-text_27 flex-row justify-between">
            <img class="icon_10" referrerpolicy="no-referrer" src="../assets/images/mine/sz.png" />
            <span class="text-group_10">设置</span>
          </div>
          <div class="section_4 flex-col"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import goShare from '@/mixins/goShare'
import TaskItem from '@/components/points/TaskItem.vue'
import GoodsItem from '@/components/points/GoodsItem.vue'
import CouponItem from '@/components/mall/CouponItem.vue'
import Popup from '@/components/common/Popup.vue'
import env from '@/js/env.js'

export default {
  mixins: [goShare],
  data() {
    return {
      options: {},
      baseInfo: {},
      floor: [],          //  楼层
      cancelObj: {},
      pointsGoods: [],    //  积分商品
      couponsList: [],    //  展示出来的优惠券
      allCouponsList: [], //  待展示出来的优惠券
      signPopupShow: false,
      vipCardPopupShow: true,
      couponsListCancelObj: {},
      pointsGoodsListCancelObj: {},
      loadingUserIndexFirst: true,    //  是否第一次加载用户基础信息
      vipCard: {},
      area: '',
      drawPopupShow: false,
      isLive: false,
      isECoin: "",
      isIntegral: "",
      showJson: undefined,
      isWm: "",
      isYht: "",
      programWindowList: [], // 抽奖弹框的轮播图
      isWxWork: wx.getSystemInfoSync().environment === 'wxwork',    //  是否是企业微信小程序
      sharePhone: '',
      employeeType: 0,
      again: 0,
      isShenYang: false,
      vichyShow: true,
      numberInfo: ''
    }
  },

  components: {
    TaskItem,
    GoodsItem,
    CouponItem,
    Popup,
  },

  computed: {
    ...mapGetters(['location', 'scopeId', 'storeId', 'storeName', 'locationCopy', 'wxID', 'nearestChain', 'userInfo', 'sharePageUrl', 'shareUrl', 'openId', 'cardDepartId', 'locationDetailInfo', 'addrName', 'showIndexPopup']),
    store() {
      return this.nearestChain
    },
    showMain() {     //  是否显示界面
      if (this.scopeId && this.openId) {
        return true
      }
      return false
    },
    phone() {
      if (this.userInfo && this.userInfo.phone) {
        this.updateAppSetting({
          userPhone: this.userInfo.phone
        })
        return this.$utils.secretMobile(this.userInfo.phone)
      }
      return ''
    },
    // area(){
    //   return this.getAreaStr(this.locationDetailInfo.address)
    // }
  },

  watch: {
    'baseInfo.cardCount'(newVal, oldVal) {
      this.vipCardPopupShow = this.baseInfo.cardCount ? true : false
    },
    locationCopy(newVal, oldVal) {
      this.getUserIndex()
      console.log(newVal, oldVal)
      if (newVal && oldVal != newVal) {
        this.login().then(data => {
          this.goShareCondition('index')
          this.getCouponsList()
          this.getPointsGoodsList()
          this.getVipCardList()
          // this.addrName = this.$const.getAreaStr(this.locationDetailInfo.address)
        }, err => {
        })
      }
    },
    userInfo(newVal, oldVal) {
      if (newVal && !oldVal) {    //  getUserIndex会更新 userInfo， 因为查看会员码用到userNo
        this.getUserIndex()
        this.getCouponsList()
        this.getPointsGoodsList()
        console.log('拿取地理位置');
        // this.addrName = this.$const.getAreaStr(this.locationDetailInfo.address)
      }
    },
    addrName() {
      this.getUserIndex();
    },
    'baseInfo.storeId'() {
      wx.setStorageSync('isWm', 'false');
      this.isWm = false;
      wx.setStorageSync('isYht', 'false');
      this.isYht = false;
      if (this.baseInfo.storeId == '4767') { //万民：4767
        wx.setNavigationBarColor({
          backgroundColor: '#f39700',
          frontColor: '#ffffff'
        });
        wx.setNavigationBarTitle({
          title: '山西万民',
        });
        wx.setBackgroundColor({
          backgroundColor: '#f39700'
        });
        wx.setStorageSync('isWm', 'true')
        this.isWm = true;
      }
      if (this.baseInfo.storeId == '4776') { //养和堂：4776
        wx.setNavigationBarColor({
          backgroundColor: '#159547',
          frontColor: '#ffffff'
        });
        wx.setNavigationBarTitle({
          title: '养和堂',
        });
        wx.setBackgroundColor({
          backgroundColor: '#159547'
        });
        wx.setStorageSync('isYht', 'true')
        this.isYht = true;
      }
      if (this.baseInfo.storeId != '4776' && this.baseInfo.storeId != '4767') {
        wx.setNavigationBarColor({
          backgroundColor: '#287C59',
          frontColor: '#ffffff'
        });
        wx.setNavigationBarTitle({
          title: '我的',
        });
        wx.setBackgroundColor({
          backgroundColor: '#287C59'
        })
      }
      console.log("isWm is " + this.isWm);
      console.log("isYht is " + this.isYht)
    }
  },

  methods: {
    ...mapActions(['updateAppSetting', 'loadShareUrl', 'login', 'openRouteByWebview', 'openLiveByWebview', 'openHealthRouteByWebview']),
    dev() {
      wx.showToast({
        title: '开发中，敬请期待！',
        icon: 'none',
        duration: 2000
      })
    },
    /**
     * 前往webview
     * @param route：路径
     * @param type：类型 healthWX健康社区 page原生页面 mall商城
     */
    openWebView(route, type = 'mall') {
      if (this.drawPopupShow) {
        this.drawPopupShow = false
        this.updateAppSetting({
          showIndexPopup: 1
        })
      }
      // 获取区域公司
      let companyStr = this.$const.getAreaCompany(this.baseInfo.storeId)
      let routeArr = {
        '/pointsMall/draw': '积分抽奖',
        '/index': '送药上门',
        '/pages/nearbyStore/list': '附近门店',
        '/goods/searchHome': '实时找药',
        '/user/card/cardList': '卡包',
        '/user/order/consumptionList': '消费记录',
        '/chat/room': '用药咨询',
        '/pointsMall': '积分商城',
        '/my/memberList': '健康档案',
        '/specialDisease': '特病管理',
        '/chronic': '慢病管理',
        '/goods/drugDemandList': '我的需求',
        [`/brandMall/home?brandId=${this.baseInfo.brandId}`]: '薇姿品牌馆',

      }
      if (type == 'healthWX') {
        routeArr['/index'] = '健康社区'
      } else {
        routeArr['/index'] = '送药上门'
      }
      // 友盟埋点 todo
      // this.$uma.trackEvent('serviceItem', {
      //   'name': routeArr[route],
      //   'chainName':this.nearestChain.chainName ||'',
      //   'chainId':this.nearestChain.id || '',
      //   'storeId':this.storeId,
      //   'storeName':this.storeName
      // })

      if (this.signPopupShow) {
        this.signPopupShow = false
      }
      if (!this.scopeId || !this.openId) {
        return
      }
      if ((type == 'dzb' || type == 'healthWX') && this.baseInfo.storeId && !this.baseInfo.cardCount) {
        wx.showToast({
          title: '请先领取会员卡',
          icon: 'none',
          duration: 2000
        })
        return
      }
      if (!this.userInfo) {
        this.goLoginAction()
        return
      }

      if ((['/pointsMall'].includes(route) && this.baseInfo.integralFlag != 1) || (['/index'].includes(route) && this.baseInfo.medicineToDoorflag != 1 && type == 'h5')) {
        console.log(this.cardDepartId, 'pointsMall')
        wx.showToast({
          title: '此功能该区域正在建设中！',
          icon: 'none',
          duration: 2000
        })
        return
      }

      //  打开健康社区外链
      if (type == 'healthWX') {
        console.log(this.cardDepartId, 'dil')
        if (!this.cardDepartId) {
          wx.showToast({
            title: '此功能该区域正在建设中！',
            icon: 'none',
            duration: 2000
          })
          return
        }

        this.openHealthRouteByWebview({
          route: route,
          jumpType: 'push'
        })

        return
      }

      //  打开品牌馆外链
      if (route.includes('brandId')) {
        if (!this.baseInfo.brandId) {
          wx.showToast({
            title: '此功能该区域正在建设中！',
            icon: 'none',
            duration: 2000
          })
          return
        }
        // return
      }

      //  打开原生页面
      if (type == 'page') {
        mpvue.navigateTo({
          url: route
        })
        return
      }
      //  打开直播外链
      if (type == 'live') {
        this.openLiveByWebview({
          route: route,
          jumpType: 'push',
          sendUserInfo: true
        })
        return
      }

      //  打开医药商城h5外链
      this.openRouteByWebview({
        route: route,
        jumpType: 'push',
        sendLocation: true
      })

    },
    jumpWeizan() {
      wx.navigateToMiniProgram({
        appId: 'wx92d650b253f8f2e3',//小程序appid
        path: 'pages/index/index?zbid=1106745572',//跳转关联小程序app.json配置里面的地址
        extraData: {//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。
          // zbid: '1106745572'
        },
        //**重点**要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版）
        envVersion: 'release',
        success(res) {
          // 打开成功
        }
      })
    },
    // 前往登录
    goLoginAction() {
      wx.navigateTo({
        url: '/pages/register'
      })
    },
    //  前往会员码页面
    goCodePage() {
      wx.navigateTo({
        url: '/pages/vipCode'
      })
    },
    getUserIndex(a = 0) {
      // 切换地址前先隐藏弹窗
      if (!this.userInfo) {
        return
      }

      if (this.loadingUserIndexFirst) {
        wx.showLoading()
      }

      //  获取用户基本信息
      this.cancelObj.request && this.cancelObj.request.abort()
      this.$api.userInfoIndex(this.cancelObj).then(data => {
        if (this.loadingUserIndexFirst) {
          wx.hideLoading()
        }
        this.vipCardPopupShow = true
        this.baseInfo = data || {}
        //品牌馆是否显示
        if (!this.baseInfo.brandId) {
          this.vichyShow = false
        } else {
          this.vichyShow = true
        }

        // 首页抽奖弹窗判断
        if (!this.programWindowList.length) {
          this.getProgramWindow();
        }

        this.updateAppSetting({
          cardDepartId: this.baseInfo.cardDepartId || '',
          userInfo: this.baseInfo.userInfo
        })
        this.loadingUserIndexFirst = false
        this.isECoin = this.baseInfo.isECoin
        this.isIntegral = this.baseInfo.isIntegral


      }, err => {
        if (this.loadingUserIndexFirst) {
          wx.hideLoading()
        }

        err.msg && wx.showModal({
          title: '基本信息获取提示',
          content: err.msg,
          success: (res) => {
          }
        })
      })
    },
    getUserMy() {
      this.$api.getUserMy().then(data => {
        this.numberInfo = data || {}
      }, err => {
      })
    },
    // getVipCardList(){
    //   this.$api.checkVipCardList().then(res=>{
    //    this.vipCard = res.data[0]
    //    console.log(this.vipCard,111)
    //   })
    // },
    //  获取用户待领取优惠券列表
    getCouponsList() {
      this.couponsListCancelObj.request && this.couponsListCancelObj.request.abort()
      if (this.userInfo && this.userInfo.userId) {
        this.$api.getHomeCouponList(this.couponsListCancelObj).then(data => {
          data && data.forEach(item => {
            item.isShow = true
          })

          this.allCouponsList = data || []
          this.couponsList = this.allCouponsList.splice(0, 2)
        }, err => {
          console.log('优惠券列表获取失败', err)
        })
      }
    },
    // 获取首页抽奖轮播弹框
    getProgramWindow() {
      const params = {
        storeId: this.baseInfo.storeId,
      }
      this.$api.getProgramWindow(params).then(data => {
        this.programWindowList = data.programWindowCode;
        if (this.programWindowList.length) {
          this.drawPopupShow = true;
        } else {
          this.drawPopupShow = false;
        }
      }, err => {
        console.log(err)
      })
    },
    removeCouponItem(index, info) {
      info.isShow = false

      setTimeout(() => {
        this.couponsList.splice(index, 1)

        if (this.allCouponsList.length) {
          this.couponsList.push(this.allCouponsList.splice(0, 1)[0])
        }
      }, 1000)

    },
    // 优惠卷本地加一
    addCouponItem() {
      this.baseInfo.voucherCount = this.baseInfo.voucherCount - 0 + 1
    },
    //  获取积分商品列表
    getPointsGoodsList() {
      this.pointsGoodsListCancelObj.request && this.pointsGoodsListCancelObj.request.abort()
      if (this.userInfo && this.userInfo.userId) {
        this.$api.getHomePointsGoods({
          pageNo: 1,
          pageSize: 3,
          isPoint: 1,
          isGift: 1
        }, this.pointsGoodsListCancelObj).then(data => {
          this.pointsGoods = data.list || []
        }, err => {
          console.log('积分商品获取失败', err)
        })
      }
    },
    //  签到
    sign() {
      this.signPopupShow = false

      if (this.baseInfo.isSign) {   //  已签到
        this.openWebView('/pointsMall/dailySign')
        return
      }

      wx.showLoading()
      this.$api.pointsMallSign().then((res) => {
        wx.hideLoading()
        this.baseInfo.isSign = 1
        this.signPopupShow = true
        this.getUserIndex()
      }, err => {
        wx.hideLoading()
        err.msg && wx.showModal({
          title: '提示',
          content: err.msg,
          success: (res) => {
          }
        })
      })
    },
    // 关闭
    closeDrawPopup() {
      this.drawPopupShow = false
      this.updateAppSetting({
        showIndexPopup: 1
      })
    },
    // getAreaStr(str) {
    //   let reg = /.+?(省|市|自治区|特别行政区)/g;
    //   let arr = str.match(reg);
    //   let addr = arr[0]
    //   return addr
    // },
    getIsLive() {
      var that = this
      wx.request({
        url: env.apiBaseUrl + '/qvb.json',
        header: {
          'content-type': 'application/json' // 默认值
        },
        success(res) {
          that.isLive = res.data.qlvb
        }
      })
    },
    isShenyangCity() {
      let reg = /.+?(省|市|自治区|自治州|县|区)/g;
      if (this.locationDetailInfo && this.locationDetailInfo.address) {
        let city = this.locationDetailInfo.address.match(reg)
        if (city[1] == '沈阳市') {
          this.isShenYang = false
        } else {
          this.isShenYang = true
        }
      }
    }
  },
  onLoad(options) {
    this.options = options
    this.updateAppSetting({
      indexOptions: options
    })

    this.loadShareUrl()
    // this.goShareCondition('index')

    //  每次重启首页都要重新登录
    if (this.scopeId) {
      this.login().then(data => {
        this.goShareCondition('index')
        this.getUserMy()
      }, err => {
      });
    }
  },
  onShow() {
    this.getUserIndex()
    // this.getIsLive();
    this.isShenyangCity();
  },
  onHide() {

    this.cancelObj.request && this.cancelObj.request.abort()
  },
  //  转发设置
  onShareAppMessage() {
    let phone = this.sharePhone || this.userInfo.phone || ''
    return {
      title: '壹药臻选',
      desc: '',
      path: 'pages/index?userPhone=' + phone + '&employeeType=' + this.employeeType,
      success: () => {
      },
    }
  },
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page {
  height: 100vh;
  width: 100%;
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  // padding: 0 8px;
  box-sizing: border-box;



  .header {
    width: 100%;
    height: 159px;
    background: linear-gradient(90deg, #ECFCF9 0%, #D5FBEE 100%);
  }

  .main-wrap {
    padding: 0 8px;
    padding: 0 8px;
    box-sizing: border-box;
    overflow-y: auto;
    margin-top: -50px;
    // padding-top: 12px;
    // padding-bottom: 60px;
  }

  .group_1 {
    position: relative;
    // background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng1b4b595ef6fd3d4766dd15736ad37ff98b67402598d5d30e18798b3d2303a9c3)
    //   100% no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;

    .user-info {
      background-color: #fff;
      border-radius: 6px 6px 0 0;

      .gr {
        width: 7px;
        height: 7px;
      }

      .head-img {
        width: 54px;
        height: 54px;
        margin-right: 12px;
        border-radius: 100%;
      }

      .sign-btn-wrap {
        text-align: center;

        .sign-btn {
          display: flex;
          align-items: center;
          padding: 5px 12px;
          border-radius: 30px;
          color: #ffffff;
          background-image: linear-gradient(179deg, #FF7E00 0%, #FF5500 100%);

          .icon {
            width: 22px;
            height: 22px;
            margin-right: 5px;
          }
        }
      }
    }


    .group_3 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 12px;
      width: 240px;
      height: 72px;
      margin-right: 8px;
      position: relative;

      .head-img {
        width: 66px;
        height: 66px;
        border: 1px solid #31C498;
        border-radius: 100%;
        margin-right: 8px;
        // margin-top: -10px;
        // z-index: 2;
        // position: relative;
      }

      .text-group_12 {
        .text_2 {
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-family: MILanPro--GB1-4;
          text-align: justify;
          white-space: nowrap;
          line-height: 22px;
          margin-right: 32px;
        }

        .text_3 {
          overflow-wrap: break-word;
          color: rgba(102, 102, 102, 1);
          font-size: 12px;
          font-family: MILanPro--GB1-4;
          text-align: justify;
          white-space: nowrap;
          line-height: 16px;
          margin-top: 4px;
        }
      }

      .single-avatar_1 {
        position: relative;
        top: -8px;
        width: 66px;
        height: 66px;
        margin-right: 9px;
        border-radius: 50%;
      }
    }

    .group_4 {
      width: 110px;
      height: 72px;
      background-size: 100% 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 4px 10px 4px 10px;
      border-radius: 12px;

      .img-text_19 {
        width: 84px;
        display: flex;
        align-items: center;

        .icon_1 {
          width: 30px;
          height: 30px;
          margin-top: 2px;
        }

        .text-group_2 {

          color: rgba(18, 184, 134, 1);
          font-size: 14px;
          font-family: MILanPro--GB1-4;
          white-space: nowrap;
          line-height: 16px;
        }
      }

      .button_1 {
        background-color: rgba(18, 184, 134, 1);
        border-radius: 13px;
        margin: 4px 6px 0 4px;
        padding: 4px 12px 4px 16px;

        .text_4 {
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 14px;
          font-family: MILanPro_DEMIBOLD--GB1-4;
          text-align: justify;
          white-space: nowrap;
          line-height: 18px;
        }
      }
    }
  }

  .group_5 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    align-self: center;
    box-sizing: border-box;
    padding: 16px 12px 16px 16px;

    .group_12 {
      .text_5 {
        flex: 1;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        font-family: MILanPro_DEMIBOLD--GB1-4;
        text-align: justify;
        white-space: nowrap;
        line-height: 18px;
      }

      .text_6 {
        overflow-wrap: break-word;
        color: rgba(102, 102, 102, 1);
        font-size: 12px;
        font-family: MILanPro--GB1-4;
        text-align: justify;
        white-space: nowrap;
        line-height: 16px;
        margin: 2px 0 0 118px;
      }

      .icon_2 {
        width: 6px;
        height: 8px;
        margin-left: 2px;
        margin-top: 1px;
        // margin: 6px 0 4px 2px;
      }
    }

    .group_13 {
      margin: 12px 0 0 0;
      flex: 1;

      .list_3 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;

        .img-text_20 {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .icon_3 {
            // background-size: 100% 100%;
            // margin: 0 4px 0 2px;
            // padding: 0 1px18px18px;
            position: relative;

            .img {
              width: 28px;
              height: 28px;
            }

            .badge {
              position: absolute;
              background: #EB2337;
              color: #fff;
              border-radius: 50%;
              width: 16px;
              height: 16px;
              line-height: 16px;
              right: -8px;
              top: -4px;
              text-align: center;
            }
          }

          .text-group_3 {
            width: 54px;
            overflow-wrap: break-word;
            color: rgba(102, 102, 102, 1);
            font-size: 12px;
            font-family: MILanPro--GB1-4;
            text-align: center;
            white-space: nowrap;
            line-height: 16px;
            margin-top: 8px;
          }
        }
      }
    }
  }

  .group_6 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    width: 360px;
    align-self: center;
    margin-top: 12px;
    padding: 16px 0 16px 0;

    .text_7 {
      overflow-wrap: break-word;
      color: rgba(51, 51, 51, 1);
      font-size: 14px;
      font-family: MILanPro_DEMIBOLD--GB1-4;
      text-align: justify;
      white-space: nowrap;
      line-height: 18px;
      margin: 0 286px 0 16px;
    }

    .box_1 {
      background-color: rgba(255, 255, 255, 1);
      margin-top: 8px;
      padding: 18px 16px 0 16px;

      .img-text_21 {
        width: 86px;
        margin: 0 236px 0 2px;

        .icon_4 {
          width: 20px;
          height: 20px;
          margin: 1px 0 1px 0;
        }

        .text-group_4 {
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 14px;
          font-family: MILanPro--GB1-4;
          text-align: justify;
          white-space: nowrap;
          line-height: 20px;
        }
      }

      .group_7 {
        background-color: rgba(245, 245, 245, 1);
        width: 326px;
        height: 1px;
        margin-top: 16px;
      }
    }

    .box_2 {
      background-color: rgba(255, 255, 255, 1);
      padding: 18px 16px 0 16px;

      .img-text_22 {
        width: 86px;
        margin: 0 236px 0 4px;

        .icon_5 {
          width: 20px;
          height: 20px;
          margin: 1px 0 1px 0;
        }

        .text-group_5 {
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 14px;
          font-family: MILanPro--GB1-4;
          text-align: justify;
          white-space: nowrap;
          line-height: 20px;
        }
      }

      .section_3 {
        background-color: rgba(245, 245, 245, 1);
        width: 326px;
        height: 1px;
        margin-top: 16px;
      }
    }

    .box_3 {
      background-color: rgba(255, 255, 255, 1);
      padding: 18px 16px 0 16px;

      .img-text_23 {
        width: 86px;
        margin: 0 236px 0 2px;

        .icon_6 {
          width: 20px;
          height: 20px;
          margin: 1px 0 1px 0;
        }

        .text-group_6 {
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 14px;
          font-family: MILanPro--GB1-4;
          text-align: justify;
          white-space: nowrap;
          line-height: 20px;
        }
      }

      .group_8 {
        background-color: rgba(245, 245, 245, 1);
        width: 326px;
        height: 1px;
        margin-top: 16px;
      }
    }

    .box_4 {
      background-color: rgba(255, 255, 255, 1);
      padding: 18px 16px 0 16px;

      .img-text_24 {
        width: 100px;
        margin: 0 222px 0 2px;

        .icon_7 {
          width: 20px;
          height: 20px;
          // margin: 1px 0 1px 0;
        }

        .text-group_7 {
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 14px;
          font-family: MILanPro--GB1-4;
          text-align: justify;
          white-space: nowrap;
          line-height: 20px;
        }
      }

      .group_9 {
        background-color: rgba(245, 245, 245, 1);
        width: 326px;
        height: 1px;
        margin-top: 16px;
      }
    }

    .box_5 {
      background-color: rgba(255, 255, 255, 1);
      padding: 18px 16px 0 16px;

      .img-text_25 {
        width: 104px;
        margin-right: 222px;

        .icon_8 {
          width: 20px;
          height: 20px;
          margin: 1px 0 1px 0;
        }

        .text-group_8 {
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 14px;
          font-family: MILanPro--GB1-4;
          text-align: justify;
          white-space: nowrap;
          line-height: 20px;
        }
      }

      .group_10 {
        background-color: rgba(245, 245, 245, 1);
        width: 326px;
        height: 1px;
        margin-top: 16px;
      }
    }

    .box_6 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 12px;
      padding: 18px 252px 18px 18px;

      .img-text_26 {
        width: 88px;

        .icon_9 {
          width: 20px;
          height: 20px;
          margin: 1px 0 1px 0;
        }

        .text-group_9 {
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 14px;
          font-family: MILanPro--GB1-4;
          text-align: justify;
          white-space: nowrap;
          line-height: 20px;
        }
      }
    }

    .box_7 {
      background-color: rgba(245, 245, 245, 1);
      width: 326px;
      height: 1px;
      align-self: center;
    }

    .box_8 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 12px;
      padding: 18px 16px 0 16px;

      .img-text_27 {
        width: 60px;
        margin: 0 264px 0 2px;

        .icon_10 {
          width: 20px;
          height: 20px;
          margin: 1px 0 1px 0;
        }

        .text-group_10 {
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 14px;
          font-family: MILanPro--GB1-4;
          text-align: justify;
          white-space: nowrap;
          line-height: 20px;
        }
      }

      .section_4 {
        background-color: rgba(245, 245, 245, 1);
        width: 326px;
        height: 1px;
        margin-top: 16px;
      }
    }
  }
}
</style>
